<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 完整的promis书写
        // 创造一个promise实例
        // const p1 = new Promise((resolve, reject) => {
        //     console.log('开始请求数据');
        //     // try调试代码块，正常情况下，JS按顺序执行try子句中的代码，如果没有异常发生，将会忽略catch跳转到finally子句继续执行。
        //     try {
        //         // 模拟ajax错误状态
        //         // throw new Error('请求数据错误')
        //         setTimeout(() => {
        //             console.log('数据请求成功');
        //             resolve('okk')
        //         }, 1000)
        //         // 如果在try子句运行错误，或者使用throw语句主动抛出异常，则执行catch子句中的代码，同时传入一个参数，引用Error对象
        //     } catch (e) {
        //          //e上有一个message属性,就是当前错误的信息
        //         reject(e.message)
        //     }
        // })
        // console.log("p1", p1)
        // 完整的promise函数书写


        // then,catch, finally方法
        // const p1 = new Promise((resolve, reject) => {
        //     try {
        //         console.log('开始请求数据');
        //         // throw new Error('网络出现问题！！！')
        //         setTimeout(() => {
        //             console.log('数据请求成功');
        //             resolve({
        //                 token: "wgwgaeheahdbf"
        //             })
        //         }, 1000);
        //     } catch (e) {
        //         reject(e.message)
        //     }
        // })
        //     Promise的then方法
        //     - then方法是同步绑定的,但是then中的回调函数是异步的,需要等到调用then的promise实例状态发生改变
        //     - then方法接收两个回调函数,分别处理成功promise实例和失败promise实例的逻辑
        //     - then接收的两个回调函数接受两个参数,分别是成功promise的值和失败promise的值

        //   then的返回值:
        //     1. then默认返回一个成功状态的promise实例,值是回调函数的返回值
        //     2. 当then中的回调函数返回一个promise实例的时候,则then方法的返回值,和这个promise实例保持一致
        //     3. 当then中有报错但是没有被处理的时候,则then直接返回失败的promsie实例,值为错误信息
        // const p2 = p1.then((value) => {
        //     console.log('成功', value);
        //     const re = new Promise((resolve, reject) => {
        //         try {
        //             console.log('开始请求b数据');
        //             throw new Error('b错误')
        //             setTimeout(() => {
        //                 console.log('b数据请求成功');
        //                 resolve('bbbb')
        //             }, 1000)
        //         } catch (e) {
        //             reject(e.message)
        //         }
        //     })

        //     return re
        // }, )
        // console.log('p2', p2);

        // catch方法:
        // - 当调用catch方法的promise实例变为失败状态,则会执行catch中的回调函数
        // - catch的作用和then方法的第二个回调函数的作用一致
        // - catch方法的返回值和then方法的返回值规则保持一致
        // catch专门处理失败的，相当于then的第二个参数
        // const p3 = p1.catch(reason => {
        //     console.log('p3', reason);
        //     return new Promise((resolve, reject) => {
        //         resolve(1)
        //     })
        // })
        // console.log('p3', p3);

        // finally方法:
        // - 无论调用finally方法的promise实例是成功还是失败,都能进入finally的回调函数中执行
        // - finally不接受promise实例的值
        // - finally的返回值
        //   - 默认穿透(finally的返回值和调用finally的promise实例保持一致)
        //   - 当finally的回调函数返回一个失败的promise实例时,finally的返回值和这个失败的promise实例保持一致
        //   - 当finally的回调函数中报错,则finally返回失败的promise实例,值为错误信息
        // const p4 = p1.finally((reason) => {
        //     // throw new Error('finally报错')
        //     return new Promise((resolve, reject) => {
        //         // resolve('finally成功')
        //         // reject('finally失败')
        //     })
        // })
        // console.log('p4', p4);

        // then,catch, finally方法



        // const q1 = new Promise((resolve, reject) => {
        //     console.log('开始请求数据');
        //     try {
        //         // throw new Error('数据请求错误')
        //         console.log(111);
        //         setTimeout(() => {
        //             console.log('数据请求成功');
        //             resolve('数据okk')
        //         }, 1500)

        //     } catch (e) {
        //         reject(e.massage)
        //     }

        // })
        // console.log('q1', q1);

        const q2 = new Promise((resolve, reject) => {
            console.log('开始请求数据');
            try {
                // 模拟错误
                // throw new Error('数据请求失败');
                setTimeout(() => {
                    console.log('数据请求成功');
                    // 请求成功后返回filfilled okkk
                    resolve('okkk')
                }, 1500);
            } catch (e) {
                reject(e.message)
            }
        })
        console.log('q2', q2);

        // promise的then方法
        // value是请求成功返回的值, 可以随便写不能写数字， 如果没写返回undefined
        // const w2 = q2.then((value) => {
        //     const re = new Promise((resolve, reject) => {
        //         try {
        //             console.log('开始请求b数据');
        //             throw new Error('b错误')
        //             setTimeout(() => {
        //                 console.log('b数据请求成功');
        //                 resolve('bbbb')
        //             }, 1500);
        //         } catch (e) {
        //             reject(e.message)
        //         }
        //     })
        //     return re
        // })
        // console.log('w2', w2);


        // const w2 = q2.then((value) => {
        //     console.log('开始请求b数据');
        //     const re = new Promise((resolve, reject) => {
        //         try {
        //             throw new Error('b错误')
        //             setTimeout(() => {
        //                 console.log('b数据请求成功');
        //                 resolve('hhahah')
        //             }, 1500)

        //         } catch (e) {
        //             reject(e.message)
        //         }
        //     })
        //     return re
        // })
        // console.log('w2', w2);

        // const p3 = q2.catch((reason) => {
        //     console.log('开始请求c数据');
        //     const re = new Promise((resolve, reject) => {
        //         try {
        //             // throw new Error('c错误')
        //             setTimeout(() => {
        //                 console.log('c数据请求成功');
        //                 resolve('hahah')
        //             }, 1500);

        //         } catch (e) {
        //             reject(e.massage)
        //         }
        //     })
        //     return re
        // })
        // console.log('p3', p3);

        const p4 = q2.finally((reason) => {
            // throw new Error('finally报错')
            return new Promise((resolve, reject) => {
                // resolve('finally成功')
                // reject('finally失败')
            })
        })
        console.log('p4', p4);

    </script>
</body>

</html>